package com.tencent.compose.sample.mainpage.material3

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.Checkbox
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.ui.tooling.preview.Preview

@Composable
@Preview()
internal fun CheckboxDemo() {
    // 1. 状态管理：使用 remember 保留状态，避免重组时重置；mutableStateOf 实现状态可观察
    // checkedState：当前复选框选中状态（true=选中，false=未选中）
    // onStateChange：状态变更回调，接收新状态值用于更新 checkedState
    val (checkedState, onStateChange) = remember { mutableStateOf(true) }

    // 2. 布局容器：Row 横向排列复选框和文本，模拟 Material3 列表项交互区域
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp)
            .toggleable(
                value = checkedState,
                onValueChange = { isChecked ->
                    onStateChange(isChecked)
                },
                role = Role.Checkbox,
            )
            .padding(horizontal = 16.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        // 3. 复选框组件：Material3 标准 Checkbox，仅负责状态展示，不单独处理点击
        Checkbox(
            // 绑定状态：控制复选框是否显示选中样式
            checked = checkedState,
            onCheckedChange = null,
        )

        // 4. 文本描述：展示复选框对应的选项文本，使用主题样式保证全局风格统一
        Text(
            text = "Option selection",
            style = MaterialTheme.typography.bodyLarge,
            modifier = Modifier
                .padding(start = 16.dp)
                .semantics {
                    this.role = Role.Checkbox
                }
        )
    }
}
